/**
 * 开发成vue插件使用echarts
 * javascript:
 *  Object.defineProperties(obj,props)
     方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象
        obj   在其上定义或修改属性的对象
        props 要定义其可枚举属性或修改的属性描述符的对象
 */
// 导入echarts
import echarts from 'echarts'
import 'echarts/map/js/china'
import '../utils/map.js'
// import country from '@/utils/country'
// 导入地图的js文件
// import 'echarts/map/js/china'
// 导入世界的js文件
// import 'echarts/map/js/world'
// 导入映射的翻译-世界国家名称
// 导入城市的js
// import 'echarts/map/js/province/neimenggu'
const install = function (Vue, options) {
  // 添加实例方法
  // Vue.prototype.demo=function(){}  //obj.name
  // Vue.prototype.$myChart={demo(),fun(),...}
  Object.defineProperties(Vue.prototype, {
    $myChart: {
      get() {
        return {
          // 2. 中国地图
          chinaMap(id, data) {
            const myChart = echarts.init(document.getElementById(id))
            const option = {
              tooltip: { // 悬浮弹框
                triggerOn: 'click', // 提示框触发的条件
                enterable: true, // 鼠标是否可进入提示框浮层中，默认为false
                formatter(item) { // item=下面serves里面的data里面的每一项 //[{} ] data={} a b c d
                  return '<a href="#/citys/' + item.name + '" style="color:#fff">省份：' + item.name + '--' + item.value + '--详情</a>'
                }

              },
              visualMap: [{ // 映射高亮颜色
                orient: 'horizontal', // 水平的
                type: 'piecewise', // 离散
                bottom: 0,
                textGap: 4,
                itemGap: 4,
                itemWidth: 10,
                itemHeight: 10,
                padding: 2,
                textStyle: {
                  fontSize: 9
                },
                pieces: [ // 配置颜色区间
                  {
                    min: 0,
                    max: 0,
                    color: '#FFFFFF'
                  },
                  {
                    min: 1,
                    max: 9,
                    color: '#FAEBD2'
                  },
                  {
                    min: 10,
                    max: 99,
                    color: '#E9A188'
                  },
                  {
                    min: 100,
                    max: 499,
                    color: '#D56355'
                  },
                  {
                    min: 500,
                    max: 999,
                    color: '#BB3937'
                  },
                  {
                    min: 1000,
                    max: 10000,
                    color: '#772526'
                  },
                  {
                    min: 10000,
                    color: '#480F10'
                  }
                ]
              }],
              series: [{
                name: '省',
                type: 'map', // 地图  bar  line  map
                map: 'china', // 中国地图 需要引入地图china.js
                roam: false,
                zoom: 1.2,
                // nameMap: country,
                aspectScale: 0.75,
                top: 40,
                layoutCenter: ['5%', '5%'],
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 8
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    areaColor: 'rgba(0,255,236,0)',
                    borderColor: 'rgba(0,0,0,0.2)'
                  },
                  emphasis: { // 选中的区域颜色及阴影效果等
                    areaColor: 'rgba(255,180,0,0.8)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0
                  }
                },
                data
                // data: [
                //     { name: '内蒙古', value: 200 },
                //     { name: '北京', value: 800 },
                // ]
              }]
            }
            myChart.setOption(option)
          },
          // 4. 城市地图
          cityMap(id, cityname, data) {
            const myChart = echarts.init(document.getElementById(id))
            const option = {
              tooltip: { // 悬浮弹框
                triggerOn: 'click', // 提示框触发的条件
                enterable: true,
                formatter(data) { // [{} ] data={}
                  return data.name + '--' + data.value
                }
              },
              visualMap: [{ // 映射高亮颜色
                orient: 'vertical', // 垂直
                type: 'piecewise', // 离散
                bottom: 0,
                pieces: [ // 配置颜色区间
                  {
                    min: 0,
                    max: 0,
                    color: '#FFFFFF'
                  },
                  {
                    min: 1,
                    max: 10,
                    color: '#FDFDCF'
                  },
                  {
                    min: 10,
                    max: 100,
                    color: '#FE9E83'
                  },
                  {
                    min: 100,
                    max: 500,
                    color: '#E55A4E'
                  },
                  {
                    min: 500,
                    max: 10000,
                    color: '#4F070D'
                  }
                ]
              }],
              series: [{
                name: '市',
                type: 'map', // 地图
                map: cityname, // 中国地图
                roam: false,
                zoom: 1.2,
                aspectScale: 0.75,
                top: 50,
                layoutCenter: ['5%', '5%'],
                label: {
                  normal: {
                    show: true,
                    textStyle: {
                      fontSize: 8
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    areaColor: 'rgba(0,255,236,0)',
                    borderColor: 'rgba(0,0,0,0.2)'
                  },
                  emphasis: { // 选中的区域颜色及阴影效果等
                    areaColor: 'rgba(255,180,0,0.8)',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0
                  }
                },
                data
              }]
            }
            myChart.setOption(option)
          }
        }
      }
    }
  })
}

export default install
